import React from 'react';
import { Modal } from 'antd';
import { toggleFull } from '@/tool/utils/useFullscreen';

import { FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '#/utils/antdIcons';

import styles from './index.less';

export default ({ title = '', children = null }) => {
  const [visible, setVisible] = React.useState(false);

  const cancel = () => {
    toggleFull();
    setVisible(false);
  };
  return (
    <div className={styles.box}>
      <div
        className={styles.btn_full}
        onClick={() => {
          toggleFull();
          setVisible(true);
        }}
      >
        <div>{visible ? <FullscreenExitOutlined /> : <FullscreenOutlined />}</div>
      </div>
      <Modal
        width={'100%'}
        visible={visible}
        wrapClassName={styles.box_modal}
        title={
          <div className={styles.box__head}>
            <div className={styles.box__title}>{title}</div>
            <div className={styles.btn} onClick={cancel}>
              <CloseOutlined className={styles.btn_icon} />
            </div>
          </div>
        }
        footer={null}
        centered
        destroyOnClose
        closable={false}
        onCancel={cancel}
      >
        <div>{children}</div>
      </Modal>
    </div>
  );
};
